<!--
 * @Description: 传入record数据，通过判断record.type，来渲染对应的组件
 * @Author: lsb
 * @Date: 2022-02-12 
 * @LastEditors: xxx
 * @LastEditTime: 2022-02-12
 -->
<template>
 <div :class="switchFormItemClass">
            <el-input v-model="inputCtrlVal" v-if="item.type === 'input'" :placeholder="item.options.placeholder" @change="handleChange(item.model)"></el-input>
			<el-input-number v-model="inputCtrlVal" v-if="item.type === 'input-number'"
            :min="item.options.min"
            :max="item.options.max"
            label="item.options.placeholder"
			@change="handleChange(item.model)"
          ></el-input-number>
		  <el-select  v-model="inputCtrlVal" v-if="item.type === 'select'"  :placeholder="item.options.placeholder" @change="handleChange(item.model)" >
            <el-option
              v-for="it in item.options.items"
              :key="it.value"
              :label="it.label"
              :value="it.value"
            >
            </el-option>
          </el-select>
		  <el-switch  v-model="inputCtrlVal" v-if="item.type === 'switch'" :active-color="item.options.activeColor" :inactive-color="item.options.inactiveColor" @change="handleChange(item.model)">
          </el-switch>
 </div>
</template>
<script>
export default {
  name: "PublicItem",
  props: {
    // 表单数组
    item: {
      type: Object,
      required: true
    },
	design: {
	  type:Number,
	  required: true
	}
  },
  mounted() {
     
    //初始化默认值
	this.inputCtrlVal = this.item.value;
	this.ctrlId = this.item.id;
	this.timer = setInterval(this.changeProperty, 500);
	
  },
  beforeDestroy() {
      clearInterval(this.timer);
  },
   data() {
    return {
	  inputCtrlVal:'',
	  isdesign:'',
	  switchFormItemClass:'',
	  timer:''
	}
 },
  methods: {
    handleChange(key) {
	  debugger;
	  console.log('value:'+this.inputCtrlVal);
      // change事件
      this.$emit("change",this.inputCtrlVal, key);
	  //$event.target.value,
    },
	//改变属性值
	changeProperty(){
		if(this.design!=this.isdesign){
			this.isdesign = this.design;
			if(this.isdesign===1){
				this.switchFormItemClass =  "el-form-item__content_design";
			}else{
				this.switchFormItemClass =  "el-form-item__content";
			}
		}
        //如果id改变
        if(this.ctrlId!=this.item.id){
			this.ctrlId = this.item.id;
		}		
    },
}
};
</script>
<style  scoped>
.el-form-item__label {
  text-align: right;
  vertical-align: middle;
  float: left;
  font-size: 14px;
  color: #606266;
  line-height: 40px;
  padding: 0 12px 0 0;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}
.el-form-item__content_design {
  line-height: 40px;
  position: relative;
  font-size: 14px;
  pointer-events: none;
}
.el-form-item__content{
  line-height: 40px;
  position: relative;
  font-size: 14px;
}
</style>
